<template>
  <div>
    <div class="item_box">
      <p class="title_1">概要信息</p>
      <SummaryInfo/>
    </div>
    <div class="item_box">
      <p class="title_1">基本信息</p>
      <el-form ref="baseFormRef" class="custom-form" :model="baseForm" :rules="baseFormRules" label-width="180px">
        <el-row>
          <el-col :span="8">
              <el-form-item label="商机号" prop="buseoppCode">
                <el-input v-model="baseForm.buseoppCode" disabled/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="商机名称" prop="projectName">
                <el-input v-model="baseForm.projectName" disabled/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="项目名称" prop="name">
                <el-input v-model="baseForm.name" placeholder="请输入"/>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商机分类" prop="projectType">
              <el-select
                v-model="baseForm.projectType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in projectTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目年度开始时间" prop="projectStartDate">
              <el-date-picker v-model="baseForm.projectStartDate" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目年度结束时间" prop="projectEndDate">
              <el-date-picker v-model="baseForm.projectEndDate" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否总公司投标" prop="isQuote">
              <el-select
                v-model="baseForm.isQuote"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in isQuoteOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="本年度保费规模" prop="clientPremiumScope">
              <el-input v-model="baseForm.clientPremiumScope" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投标日期" prop="bidDate">
              <el-date-picker v-model="baseForm.bidDate" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="新保/续保" prop="premiumType">
              <el-select
                v-model="baseForm.premiumType"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in premiumTypeOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="与我司合作历史" prop="coopHistory">
              <el-input v-model="baseForm.coopHistory" placeholder="请填写项目名称，不同项目之间用逗号隔开" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合作关系评估" prop="crAssessment">
              <el-select
                v-model="baseForm.crAssessment"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in crAssessmentOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="经纪公司" prop="eonomicCompany">
              <el-input v-model="baseForm.eonomicCompany" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户预算" prop="clientBudget">
              <el-input v-model="baseForm.clientBudget" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户期望安排方式" prop="clientExpectWay">
              <el-select
                v-model="baseForm.clientExpectWay"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in clientExpectWayOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商机创建人" prop="createName">
              <el-input v-model="baseForm.createName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总部管理处室" prop="createSectionId">
              <el-select
                v-model="baseForm.createSectionId"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in createSectionOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否ESG项目" prop="esgProject">
              <el-select
                v-model="baseForm.esgProject"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in esgProjectOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目概况简介" prop="projectInfo">
              <el-input v-model="baseForm.projectInfo" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="其他参与公司" prop="otherCompany">
              <el-input v-model="baseForm.otherCompany" type="textarea" placeholder="不同公司名称之间用逗号隔开" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="竞争对手现状" prop="otherCompanyCondition">
              <el-input v-model="baseForm.otherCompanyCondition" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="我司目标与策略" prop="goal">
              <el-input v-model="baseForm.goal" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="附件" prop="fileIds">
              <file-upload
                v-model="baseForm.fileIds"
                :fileType="['png', 'jpg', 'pdf']"
              ></file-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="item_box">
      <p class="title_1">商机要素</p>
      <el-form ref="baseFormRef" class="custom-form" :model="businessElementsForm" :rules="businessElementsRules" label-width="180px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="预计保额" prop="predictCoverage">
              <el-input v-model="businessElementsForm.predictCoverage" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计总保费" prop="predictPremium">
              <el-input v-model="businessElementsForm.predictPremium" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目标保费" prop="targetPremium">
              <el-input v-model="businessElementsForm.targetPremium" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目标份额" prop="targetShare">
              <el-input v-model="businessElementsForm.targetShare" placeholder="请输入">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计报价/谈判日期" prop="predictDate">
              <el-date-picker v-model="baseForm.predictDate" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="历史损失记录" prop="historyLose">
              <el-input v-model="businessElementsForm.historyLose" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="涉及险种" prop="predictClasscodes">
              <el-checkbox-group v-model="businessElementsForm.predictClasscodes">
                <el-checkbox v-for="(item,index) in predictClassOptions" :label="item.label" :value="item.value" :key="index"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务渠道" prop="channel">
              <el-select
                v-model="baseForm.channel"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="dict in channelOptions"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计分出比例" prop="predictScale">
              <el-input v-model="businessElementsForm.predictScale" placeholder="请输入">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预计分出金额" prop="predictAmount">
              <el-input v-model="businessElementsForm.predictAmount" placeholder="请输入">
                <template #append>万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="baseForm.remark" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="item_box flex_c">
      <p class="title_1">审批进度</p>
      <el-button class="ml10" type="primary" plain @click="approvalHistoryVisible = true">审批进度查看</el-button>
    </div>
    <div class="item_box">
      <p class="title_1 mb10">业务联络</p>
      <!-- 司内联系人 -->
      <SnContacts/>
      <!-- 客户联系人 -->
      <CustomContacts/>
    </div>
    <el-row justify="center">
      <el-button icon="Back" @click="backPage">取消</el-button>
      <el-button type="primary" icon="Wallet" @click="submit">保存</el-button>
      <el-button type="primary" icon="Position" @click="submit">提交审批</el-button>
    </el-row>
    <ApprovalHistoryDialog v-model="approvalHistoryVisible"/>
  </div>
</template>
  
<script setup>
import SummaryInfo from '@/components/SummaryInfo.vue'
import SnContacts from './components/SnContacts.vue'
import CustomContacts from './components/CustomContacts.vue'
import ApprovalHistoryDialog from "./components/ApprovalHistoryDialog.vue";

const { proxy: vm } = getCurrentInstance()
const router = useRouter();
const props = defineProps({
  pageType: {
    type: String,
    default: false,
  },
})
const approvalHistoryVisible = ref(false)
// 返回
const backPage = () => {
  vm.$tab.closeOpenPage()
  router.back()
};
// 提交、保存
const submit = () => {
  vm.$modal.msgSuccess("提交成功");
  backPage()
  
};

// 基本信息-start
const projectTypeOptions = [
  { label: '项目类型1', value: '1' },
  { label: '项目类型2', value: '2' },
  { label: '项目类型3', value: '3' },
]
const isQuoteOptions = [
  { label: '是', value: '1' },
  { label: '否', value: '2' },
]
const premiumTypeOptions = [
  { label: '新保', value: '1' },
  { label: '续保', value: '2' },
]
const crAssessmentOptions = [
  { label: '合作关系评估1', value: '1' },
  { label: '合作关系评估2', value: '2' },
  { label: '合作关系评估3', value: '3' },
]
const clientExpectWayOptions = [
  { label: '客户期望安排方式1', value: '1' },
  { label: '客户期望安排方式2', value: '2' },
  { label: '客户期望安排方式3', value: '3' },
]
const createSectionOptions = [
  { label: '总部管理处室1', value: '1' },
  { label: '总部管理处室2', value: '2' },
  { label: '总部管理处室3', value: '3' },
]
const esgProjectOptions = [
  { label: '是', value: '1' },
  { label: '否', value: '2' },
]
const predictClassOptions = [
  {label: '企业财产险', value: '1'},
  {label: '家庭财产险', value: '2'},
  {label: '工程险', value: '3'},
  {label: '货物运输保险', value: '4'},
  {label: '船舶保险', value: '5'},
  {label: '特殊风险', value: '6'},
  {label: '农业保险', value: '7'},
  {label: '人身意外保险', value: '8'},
  {label: '建筑工程团意险', value: '9'},
  {label: '短期健康保险', value: '10'},
  {label: '责任保险', value: '11'},
  {label: '信用保险', value: '12'},
  {label: '保证保险', value: '13'},
  {label: '车险', value: '14'},
  {label: '其他', value: '15'}
]
const baseFormRules = {
}
const baseForm = reactive({
  predictClasscodes: []
})
// 基本信息-end

// 商机要素-start
const channelOptions = [
  { label: '渠道1', value: '1' },
  { label: '渠道2', value: '2' },
  { label: '渠道3', value: '3' },
]
const businessElementsRules = {
}
const businessElementsForm = reactive({
})
</script>

<style lang="scss" scoped>

</style>